<template>
  <div>
    <h3>这是第十七个demo:生命周期</h3>
    <p>{{ flower }}</p>
    <button @click="show111">换个品类</button>
     <!-- 
        vue2:
         初始:beforeCreate created
         运行：
            挂载：beforeMount mounted
            更新：beforeUpdate updated
         销毁:beforeDestroy destroyed

        vue3:
            初始：setup
            挂载:onBeforeMount onMounted
            更新:onBeforeUpdate,onUpdated
            卸载:onBeforeUnMount,onUnMounted
     -->
  </div>
</template>

<script setup lang='ts' name="Demo17">

import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

let flower = ref("花朵")



function show111(){
 flower.value = '牡丹'
}

onBeforeMount(()=>{
  console.log("挂载前");
  
})
onMounted(()=>{
  console.log("挂载后");
  
})
onBeforeUpdate(()=>{
  console.log("更新前");
  
})
onUpdated(()=>{
  console.log("更新后");
  
})
onBeforeUnmount(()=>{
  console.log("卸载前");
  
})
onUnmounted(()=>{
  console.log("卸载后");
  
})



</script>


<style lang='scss' scoped>

</style>